
{% extends 'base.html' %}

{% block css%}
<style>

.frmSearch {border: 1px solid #a8d4b1;width:750px; background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}

.frmParameter {border: 1px solid #a8d4b1;width:750px; background-color: #C6E2FF;margin: 2px 0px;padding:40px;border-radius:4px;}

.frmBtn {border: 1px solid #a8d4b1;width:750px; background-color: #fff;margin: 2px 0px;padding:40px;border-radius:4px;}

#apis-list{float:left;list-style:none;margin-top:-3px;padding:0;width:1240px;position: absolute;z-index: 1000;}
#apis-list li{padding: 10px; background: #f0f0f0; color: blue; border-bottom: #bbb9b9 1px solid; word-wrap: break-word;}
#apis-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
#para_list_str{font-size: 14px; color: #4682B4; word-break:  break-word;}
#suggesstion-box{z-index: 999;}
</style>
{% endblock %}

{% block body%} 
<div class="row" class='container-fluid'>
  <div class="col-md-7">
  	<h4>DSP API LIST</h4>
	<table class="table"> 
		<tr >
			<td>
            <div class="form-group form-horizontal">
				<div class="frmSearch">
	            <input type="text" id="search-box" placeholder="input api name and select. * show all, Esc clean all ..." style="height:40px;font-size:24px" class="form-control">

				<div id="suggesstion-box"></div>
				</div>
            </div>
			</td>
		</tr>

		<tr >
			<td>
            <div class="form-group form-horizontal">
				<div class="frmParameter">
				<span id="para_list_str"></span>
	            <input type="text" id="params_str" placeholder="parameter list, comma separated." style="height:40px;font-size:24px" class="form-control">
				</div>
            </div>
			</td>
		</tr>

		<tr >
			<td>
            <div class="form-group form-horizontal">
				<div class="frmBtn">
	                 <button class="btn btn-lg btn-success btn-apis">
                        Send API Command &nbsp;&nbsp;<i class="glyphicon glyphicon-send"></i>
                    </button>
				</div>
            </div>
			</td>
		</tr>
	</table>
  </div>

   <div class="col-md-5">
   	<h4>RESPONSE INFO</h4>
   	<table class="table"> 
		<tr >
			<td>
				<textarea  spellcheck="false" id="api_info" cols=80 rows=27 style="background-color:#FFFFCC"></textarea>
			</td>
		</tr>
	</table>

   </div>

</div>

{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">

	function response_and_scroll(data)
	{
	    console.log("resp...");
	    console.log(data);
	    $("#api_info", window.top.document).append(data)
		//Jump to the last line
	    var d = window.top.document.getElementById("api_info").scrollHeight;
	    window.top.document.getElementById("api_info").scrollTop = d;
	}

	$(document).ready(function(){

			$(document).keyup(function(event){
				switch(event.keyCode) { 
					case  27: 
					{
						// alert("ESC"); 
						$("#search-box").val("");
						$("#suggesstion-box").hide();
						$("#para_list_str").html('');
						$("#params_str").val('');
						return true;
					}
				} 
			});

			$("#search-box").keyup(function(event){
				switch(event.keyCode) { 
					case  27: 
					{
						// alert("ESC"); 
						$("#search-box").val("");
						$("#suggesstion-box").hide();
						$("#para_list_str").html('');
						$("#params_str").val('');
						return true;
					}
				} 

				$.ajax({
				type: "post",
				url: "/api/suggest",
				data:'keyword='+$(this).val(),
				beforeSend: function(){
					$("#search-box").css("background","#FFF url({{ url_for('static', filename='assets/LoaderIcon.gif') }}) no-repeat center");
				},
				success: function(data){
					$("#suggesstion-box").show();
					$("#suggesstion-box").html(data);
					$("#search-box").css("background","#FFF");
				}
				});
			});


		    $(".btn-apis").click(function() {
		        toastr["success"]("Command successfully issued.");
	
				console.log("btn_set_dsp_api ...");

				cmd = $("#search-box").val().split('(')[0];
				params_str = $("#params_str").val();

				console.log(cmd);
				console.log(params_str);

		        $.post(
					"api/set_mod_dsp_new_api_suggest", {
						cmd: cmd,
						params_str: params_str
					},
		            function(data, status) {
						console.log("data: " + data);
						lines = "\r\n" + "Request";
						lines += "\r\n" + "-----------------------------------------------------------";
						lines += "\r\n" + "api : " + cmd + "\r\n";
						
						lines += "\r\n" + "Response";
						lines += "\r\n" + "-----------------------------------------------------------";
						lines += "\r\n";
						$.each(data,function(name,value) {
							//console.log(name);
							//console.log(value);
							lines = lines + name.toString() + " : " + value.toString() + "\r\n";
						});
		                response_and_scroll(lines);
		            }
		        );

		    });


	});


	function selectApiItem(f) {
		$("#search-box").val(f);
		$("#para_list_str").html(f.split('(')[1].split(')')[0] + '<br><br>');

		$("#suggesstion-box").hide();
	}
</script>
{% endblock %}


